<template>
    <div class="app-container calendar-list-container">
        <basic-container>
            <el-form
                :model="searchForm"
                ref="searchFormRef"
                label-width="100px"
                :inline="true"
                size="small"
            >
                <el-form-item label="用户名">
                    <el-input v-model="searchForm.a"></el-input>
                </el-form-item>
                <el-form-item label="UID">
                    <el-input v-model="searchForm.b"></el-input>
                </el-form-item>
                <el-form-item label="账号类型">
                    <el-select v-model="searchForm.c" placeholder="请选择">
                        <el-option 
                            :key="1"
                            label="-请选择-"
                            value=""/>
                    </el-select>
                    
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        icon="el-icon-search"
                        @click="searchChange"
                        >查询</el-button
                    >
                    <el-button icon="el-icon-delete">重置</el-button>
                </el-form-item>
            </el-form>
            <avue-crud
                ref="crud"
                :option="tableOption"
                :data="list"
                :page="page"
                v-model="form"
                :table-loading="listLoading"
                @on-load="getList"
                @size-change="sizeChange"
                @current-change="currentChange"
                @row-update="update"
                @row-save="create"
            >
                <template slot="menuLeft">
                    <el-button
                        v-if="menuPermissions_btn_add"
                        class="filter-item"
                        type="primary"
                        icon="el-icon-plus"
                        @click="handleCreate"
                        >添加
                    </el-button>
                </template>

                <template slot="menu" slot-scope="scope">
                    <el-button
                        v-if="menuPermissions_btn_edit"
                        type="text"
                        size="small"
                        icon="el-icon-edit"
                        @click="handleUpdate(scope.row, scope.index)"
                        >修改地址
                    </el-button>
                    <el-button
                        v-if="menuPermissions_btn_del"
                        type="text"
                        size="small"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.row, scope.index)"
                        >删除
                    </el-button>
                </template>
            </avue-crud>
        </basic-container>
    </div>
</template>

<script>
import { tableOption } from "@/const/crud/member/user-address";
import { mapGetters } from "vuex";
export default {
    name: "menuPermissions",
    data() {
        return {
            searchForm: {},
            tableOption: tableOption,
            page: {
                total: 1, // 总页数
                currentPage: 1, // 当前页数
                pageSize: 20, // 每页显示多少条
            },
            list: [
                {
                    id: 11111,
                },
            ],
            listLoading: false,
            form: {},
            menuPermissions_btn_add: true,
            menuPermissions_btn_edit: true,
            menuPermissions_btn_del: true,
        };
    },
    created() {
        // this.menuPermissions_btn_add = this.permissions["sys_role_add"];
        // this.menuPermissions_btn_edit = this.permissions["sys_role_edit"];
        // this.menuPermissions_btn_del = this.permissions["sys_role_del"];
        // this.menuPermissions_btn_up = this.permissions["sys_role_perm"];
        // this.menuPermissions_btn_down = this.permissions["sys_role_perm"];
    },
    computed: {
        ...mapGetters(["elements", "permissions"]),
    },
    methods: {
        getList() {},
        searchChange() {
            this.page.currentPage = 1;
            this.getList();
        },
        sizeChange(pageSize) {
            this.page.pageSize = pageSize;
        },
        currentChange(current) {
            this.page.currentPage = current;
        },

        refreshChange() {
            this.getList(this.page);
        },

        handleCreate() {
            this.$refs.crud.rowAdd();
        },
        handleUpdate(row, index) {
            this.$refs.crud.rowEdit(row, index);
        },
        handleDelete(row, index) {
            this.$confirm(
                '是否确认删除名称为"' + row.roleName + '"' + '"的数据项?',
                "警告",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            )
                .then(function () {
                    //return delObj(row.roleId); 返回删除的方法
                })
                .then(() => {
                    this.getList(this.page);
                    this.$notify.success("删除成功");
                });
        },
        handleUp() {},
        handleDown() {},
        create(row, done, loading) {},
        update(row, index, done, loading) {},
    },
};
</script>

<style lang="scss" scoped>
</style>